<template>
  <div>
    <NavBar title="选择收货地址" />
    <div class="listContent">
      <div class="li" v-for="item in list" :key="item.id">
        <div class="left">
          <h2>
            {{ item.name }}<span>{{ item.phone }}</span>
          </h2>
          <p>
            {{ item.province_name }} {{ item.city_name }}
            {{ item.district_name }} {{ item.detail }}
          </p>
        </div>
        <div class="right" @click="delFn(item.id)">删除</div>
      </div>
    </div>
    <div class="region" @click="$router.push('/address/region')">手动添加</div>
  </div>
</template>
<script setup>
import { onActivated, ref } from "vue";
import { getAddressLists, getRemoveAddress } from "../../API";
import NavBar from "../../components/NavBar.vue";
import { useRouter } from "vue-router";
let router = useRouter();
let list = ref([]);
onActivated(() => {
  getAddress();
});

let getAddress = async () => {
  let { data } = await getAddressLists({
    page: 1,
    limit: 20,
  });
  // console.log(data.data);
  list.value = data.data.list;
};
getAddress();

let delFn = async (id) => {
  let { data } = await getRemoveAddress({ id });
  console.log(data);
  getAddress();
};
</script>
<style scoped>
.listContent {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  background-color: #fafafa;
}
.li {
  height: 150px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  box-sizing: border-box;
  margin: 10px 0;
}
.left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left h2 span {
  color: #929292;
  font-weight: normal;
  font-size: 30px;
  margin-left: 20px;
}
.left p {
  width: 100%;
  font-size: 23px;
  color: #303133;
}
.right {
  padding: 20px;
  border-left: 1px solid #efefef;
  color: #303133;
}
.region {
  width: 100%;
  height: 7%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1ec7af;
  font-size: 28px;
  color: #fff;
}
</style>